<script setup>
import { onMounted,ref } from 'vue';
import moment from 'moment'
import axios from 'axios';
let myData= ref({
  data:{},
  prize:[{}],
  rule:{}
})
onMounted(async ()=>{
  
  const { data } = await axios.get("/api/gk_get_access_token",{
    params: {
        code:window.code,
        mode:window.mode,
        activity_id:window.activity_id
      }
  });
  myData.value=data.data;
  window.openid=data.data.open_id;
  window.accesstoken=data.data.access_token;
  console.log("data>>",data)
})
const toPublic = async ()=>{
  const { data } = await axios.get("/api/gk_receive_direct",{
    params: {
      id:window.activity_id,
      open_id:window.openid,
      access_token:window.accesstoken,
    }
  });
  if(data.code!=0){
    alert(data.msg)
    return;
  }
  alert("发布成功");
}
</script>

<template>
  <div>
    <div style="height: 90px;" ></div>
    <div class="titlePan" ></div>
    <div class="timePan" >活动时间：{{ moment(myData.data.startTime).format("YYYY-MM-DD") }}至{{ moment(myData.data.endTime).format("YYYY-MM-DD") }}</div>
    <div style="height: 16px;" ></div>
    <div class="videoPan" >
      <video :src="myData.prize.url"  width="335" height="447" autoplay="true" controls>
      您的浏览器不支持 video 标签。
      </video>
    </div>
    <div style="height: 40px;" ></div>
    <div class="btnPan" @click="toPublic" ></div>
    <div style="height: 82px;" ></div>
  </div>
</template>

<style lang="less" scoped>

.titlePan{
    background: url(./assets/shipingTitle.png);
    background-size: 308px 57px;
    background-repeat: no-repeat;
    width: 308px;
    height: 57px;
    margin: 0 auto;
}
.timePan{
  padding-top: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  opacity: 0.7;
  text-align: center;
}

.videoPan{
  width: 335px;
  height: 447px;
  background-color: rgba(0, 0, 0, 0.9);
  margin: 0 auto;
}

.btnPan{
  background: url(./assets/faBu.png);
  background-size: 245px 49px;
  width: 245px;
  height: 49px;
  margin: 0 auto;
}

</style>
